---
// Modal.astro
---

<div id="donation-modal" class="modal hidden">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>感谢支持!</h2>
        <div class="qr-container">
            <div class="qr-item">
                <h3>支付宝</h3>
                <img src="/alipay-qr.jpg" alt="支付宝二维码" />
            </div>
            <div class="qr-item">
                <h3>微信支付</h3>
                <img src="/wechat-qr.jpg" alt="微信支付二维码" />
            </div>
        </div>
    </div>
</div>

<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .modal.show {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: white;
        padding: 2rem;
        border-radius: 0.5rem;
        max-width: 90%;
        width: 600px;
        position: relative;
    }

    .close {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        font-size: 2rem;
        cursor: pointer;
    }

    .qr-container {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 1.5rem;
    }

    .qr-item {
        text-align: center;
    }

    .qr-item img {
        width: 200px;
        height: 200px;
        object-fit: contain;
    }

    h2 {
        text-align: center;
        margin: 0 0 1rem 0;
    }

    h3 {
        margin: 0 0 1rem 0;
    }

    .hidden {
        display: none;
    }
</style>

<script>
    const modal = document.getElementById('donation-modal');
    const closeBtn = modal?.querySelector('.close');
    const donationLink = document.querySelector('a[href="/"]');

    donationLink?.addEventListener('click', (e) => {
        e.preventDefault();
        modal?.classList.add('show');
        modal?.classList.remove('hidden');
    });

    closeBtn?.addEventListener('click', () => {
        modal?.classList.remove('show');
        modal?.classList.add('hidden');
    });

    modal?.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.classList.remove('show');
            modal.classList.add('hidden');
        }
    });
</script>